import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import MyNavLink from "../../../components/MyNavLink";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: 1, title: "消息1" },
      { id: 2, title: "消息2" },
      { id: 3, title: "消息3" },
      { id: 4, title: "消息4" },
    ],
  };

  showPushDetail = ({ id, title }) => {
    // 携带state参数
    this.props.history.push({
      pathname: "/home/message/detail",
      state: { id, title },
    });
  };

  showReplaceDetail = ({ id, title }) => {
    this.props.history.replace({
      pathname: "/home/message/detail",
      state: { id, title },
    });
  };

  goBack = () => {
    this.props.history.goBack();
  };

  goForward = () => {
    this.props.history.goForward();
  };

  render() {
    let { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((item) => {
            return (
              <li key={item.id}>
                {/* 向路由组件传递params值 */}
                {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link> */}

                {/* 向路由组件传递search参数 */}
                {/* <Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`} > {item.title} </Link> */}

                {/* 向路由组件传递state参数 */}
                <Link
                  to={{
                    pathname: "/home/message/detail",
                    state: { id: item.id, title: item.title },
                  }}
                >
                  {" "}
                  {item.title}{" "}
                </Link>
                <button onClick={() => this.showPushDetail(item)}>
                  push查看
                </button>
                <button onClick={() => this.showReplaceDetail(item)}>
                  replace查看
                </button>
              </li>
            );
          })}
        </ul>
        <hr></hr>
        {/* 声明获取params */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}
        {/* 声明获取search参数，无需声明 */}
        {/* <Route path="/home/message/detail" component={Detail}></Route> */}

        {/* 声明获取state参数，无需声明 */}
        <Route path="/home/message/detail" component={Detail}></Route>

        <button onClick={this.goBack}> 回退</button>
        <button onClick={this.goForward}>前进</button>
      </div>
    );
  }
}
